import React from 'react';
import * as lodash from 'lodash';
import {Button, Checkbox, message, Select, Radio, Icon} from 'antd';
const RadioGroup = Radio.Group;
import {
    WeaDialog,
    WeaSearchGroup,
    WeaFormItem,
    WeaInput,
    WeaSelect,
    WeaBrowser,
    WeaCheckbox,
    WeaHelpfulTip,
    WeaTable, WeaError, WeaTextarea,WeaRightMenu,WeaTab,WeaTools
} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EPortalBrowser from "./base/EPortalBrowser";

import {cloneDeep, isEmpty} from "lodash";
import SynergyParams4Report from "./synergy/SynergyParams4Report";

class Content_timeLine_DataSource extends React.Component {

    state = {
        id: this.props.tabData.id,
        title: this.props.tabData.title || '',
        moreUrl:this.props.tabData.moreUrl||'',
        stylevalue: this.props.tabData.stylevalue || '1',
        stylename: this.props.tabData.stylename || '',
        styletype:this.props.tabData.styletype||'',
        styleindex:this.props.tabData.styleindex||'',
        datamode:this.props.tabData.datamode ||'1',
        dataList: this.props.tabData.dataList||[],
        selectedRowKeys: [],
        dataSource: this.props.tabData.dataSource || this.props.tabNew.dataSource.selected,
        isSaveTemplate: false,
        reportFormSql: this.props.tabData.reportFormSql,
        timeLineSql: this.props.tabData.timeLineSql,
        showLegend: this.props.tabData.showLegend || '1',
        ebaseid: 'timeLine',
        dataIds:[]
    };

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onOk = this.onOk.bind(this);
        this.delProps = this.delProps.bind(this);
        this.setProps = this.setProps.bind(this);
        this.addProps = this.addProps.bind(this);
        this.onSortTab=this.onSortTab.bind(this);
        this.onAddTab=this.onAddTab.bind(this);
        this.onDeleteTabs=this.onDeleteTabs.bind(this);
        this.deleteTabs=this.deleteTabs.bind(this);
        this.onAddSqlTemplate=this.onAddSqlTemplate.bind(this);
    }
    addProps(){
        const { componentProps } = this.state;
        componentProps.push({
            name: '',
            value: '',
        });
        this.setState({componentProps});
    }
    delProps(i){
        const { componentProps } = this.state;
        componentProps.splice(i,1);
        this.setState({componentProps});
    }
    setProps(value, type, i){
        const { componentProps } = this.state;
        let item = componentProps[i];
        item[type] = value;
        componentProps.splice(i,1,item);
        this.setState({componentProps});
    }


    render() {
        const { title,selectedRowKeys,dataIds} = this.state;
        const {eid, tabNew, tabData, synergyParams, tabStyleList={}} = this.props;

        const { stylevalue,styletype,styleindex,moreUrl,datamode,dataList,dataSource,isSaveTemplate,reportFormSql,showLegend,timeLineSql,ebaseid} = this.state;
        let {stylename}=this.state;
        const timeLineStyle={
            defaultName:getLabel(521446,'纵向-翠绿')
        }

        let styleIndex='';
        if(tabStyleList && !isEmpty(tabStyleList)){
            tabStyleList.map((item)=>{
                if(item.code == stylevalue){
                    styleIndex=item.name;
                }
            })
        }

        const hasSQLRight = tabNew.dataFrom.hasSQLRight;
        const options = [];
        tabNew.dataFrom.options.forEach(item => options.push({ key: item.key, selected: false, showname: item.value }));
        stylename==""?stylename=timeLineStyle.defaultName:stylename=getLabel(parseInt(styleindex),stylename);

        // 记录选中的行
        const _self = this;
        const rowSelection = {
            onChange(selectedRowKeys) {
                _self.setState({selectedRowKeys: selectedRowKeys})
            }
        };

        let _dataList = [...dataList];
        let columns = [{
            key: 'timeAxisOrder',
            title: getLabel(518412, '顺序'),
            dataIndex: 'timeAxisOrder',
            width: '14%',
            className: 'wea-table-timeAxis-order',
            render: (text, record, index) =>
                {
               let timeAxis= record.timeAxisOrder;
               return <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@jyyl8c@${record.key}`}
                     ref={el => {this[`weaError_${record.key}`] = el}}
                    error='数据为空'>
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@8ijq0f@${record.key}`}
                        value={timeAxis || ''}
                        onChange={(value)=>{
                        _dataList[record.key].timeAxisOrder = value;
                        this.setState({dataList: _dataList});
                    }}/>
                </WeaError>
        }

        }, {
            key: 'timeLine',
            title: getLabel(518415, '时间轴坐标'),
            dataIndex: 'timeLine',
            width: '30%',
            className:'wea-table-timeAxis-timeLine',
            render:(text,record,index)=>(

                <div style={{marginRight:'10px'}}>
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@j9txb9@${record.key}`}
                    value={record.timeLine || ''} viewAttr={3}
                    onChange={(value)=>{
                    _dataList[record.key].timeLine = value;
                    this.setState({dataList: _dataList});
                }}/>
        </div>
            )
        },{
            key: 'timeAxisContent',
            title: getLabel(518419, '内容'),
            dataIndex: 'timeAxisContent',
            width: '56%',
            className:'wea-table-timeAxis-content',
            render:(text,record,index)=>(
                <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@10fhhw@${record.key}`}
                    value={record.timeAxisContent || ''}
                    onChange={(value)=>{
                    _dataList[record.key].timeAxisContent = value;
                    this.setState({dataList: _dataList});
                }}/>
            )
        }];

        return(
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@1fop26`}
        className="portal-esetting-dialog portal-news-esetting-dialog"
        visible={true}
        title={getLabel(19480, '内容设置')}
        icon="icon-coms-portal"
        iconBgcolor='#1a57a0'
        style={{width: 660, height: 507}}
        hasScroll={true}
        buttons={this.getButtons()}
        onCancel={this.onCancel}
    >
        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@xyyuhj`} title={getLabel(33396, '设置项')} needTigger={true} showGroup={true}>

            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ffpnf7`} label={getLabel(24986, '标题')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                 <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@lh2huh`} inputType="multilang" isBase64={true} value={title} viewAttr={3}  onChange={value => this.setState({title: value})}/>
            </WeaFormItem>
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@hma8w0`} label={getLabel(518407,'时间轴样式') } labelCol={{span: 6}} wrapperCol={{span: 16}} >
            {
                <div style={{display: 'inline-block', width: '100%'}}>
                    <EPortalBrowser ecId={`${this && this.props && this.props.ecId || ''}_EPortalBrowser@svhduo`}
                    value={stylevalue}
                    tabname={stylename}
                    tabstyle={stylevalue}
                    tabindex={styleIndex}
                    hasSearch={true} //搜索按钮
                    title={getLabel(520605,'选择时间轴样式') }
                    multiCheck={false}
                    isShow={true}
                    ebaseid={ebaseid}
                    api={'/api/portal/timelinestyle/getTimeLineStyle'}
                    style={{width: '54px', marginLeft: '15px', height: '30px', width: '100%'}}
                    onChange={(id, name,browsertype,datas)=> {

                        let sName=name;
                        if(sName==""){
                            sName=stylename
                        }
                        let sType=browsertype;
                        if(sType==""){
                            sType=styletype;
                        }
                            this.setState({stylevalue : id, stylename: sName,styletype:sType})


                    }}
                    />
                </div>
            }
        </WeaFormItem>
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@q0vxk0`} label={getLabel(386563, 'More地址')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@b3zy0f`} inputType="multilang" value={moreUrl}  onChange={value => this.setState({moreUrl: value})} helpfulTip={getLabel(386567, '外部地址，请在地址前加上http://或https://')}/>
        </WeaFormItem>
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@pu9500`} label={getLabel(506115, '数据来源')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@yx4m51`}
                options={options}
                value={datamode}
                viewAttr={hasSQLRight ? 2 : 1}
                onChange={value => {
                    this.setState({datamode : value});
                    const {dataIds}=this.state;
                    value=='1'?dataIds.map((item,i)=>{
                        let id=item.id;
                        this.deleteTabs(id);
                    }):''
                }}
        />
        </WeaFormItem>
        { hasSQLRight && datamode=='2'?(
            <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_React.Fragment@g6rerz`}>
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@i2k6c6`} label={getLabel(502330, '数据源')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@0w1k1l`}
                    options={
                        tabNew.dataSource.options.map((item) => {
                            return {key: item.key, selected: false, showname: item.value};
                        })
                    }
                    value={dataSource}
                    // style={{width: '200px'}}
                    onChange={value => {
                    this.setState({dataSource: value});
                    }}
                />
            </WeaFormItem>
                  <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ailcui`} label={getLabel(518408, '自定义SQL')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <div className="portal-esetting-reportform-template-btns">
                        <div style={{display: 'inline-block', paddingRight: '45px', lineHeight: '16px'}}>
                            <span style={{paddingRight: '5px'}}>{getLabel(127215,"保存到模板库")}</span>
                            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@xtzcbi`}
                                helpfulTip={getLabel(390861,"是否保存到模板库")}
                                onChange={() => this.setState({isSaveTemplate: !isSaveTemplate})}
                        />
                        </div>
                        <span className="synergy-setting-btn" onClick={() => this.sp4r.onShow()}>{getLabel(33749, '系统变量')}</span>

                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@pj0xzb`}
                            type={'reportformsqltemplate'}
                            inputStyle={{width:'373px'}}
                            title={getLabel(386595, '选择SQL模板')}
                            hasAdvanceSerach={true}
                            isSingle={true}
                            icon='icon-coms-portal'
                            iconBgcolor='#1a57a0'
                            customized
                            onChange={(ids, names, datas)=>{
                                if(datas[0]){
                                this.setState({timeLineSql: datas[0].reportformsql});
                                }
                            }}

                        >
                            <span className="synergy-setting-btn">{getLabel(386596, 'SQL模板')}</span>
                        </WeaBrowser>
                    <SQLTemplate ecId={`${this && this.props && this.props.ecId || ''}_SQLTemplate@0s1vg9`} ref="SQLTemplate" onEdit={(sqlitem)=>this.refs.SaveSQLTemplate.setState({...sqlitem, visible: true})}/>
                    </div>
                    <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@iucaw8`}
                        value={timeLineSql}
                        minRows={5}
                        onChange={value => {
                            this.setState({timeLineSql: value,reportFormSql:value})
                        }}
                    />
                     <SynergyParams4Report ecId={`${this && this.props && this.props.ecId || ''}_SynergyParams4Report@lyp30b`} ref={(sp4r) => this.sp4r = sp4r}/>
                    <SaveSQLTemplate ecId={`${this && this.props && this.props.ecId || ''}_SaveSQLTemplate@42vk4r`} ref="SaveSQLTemplate" onRefresh={()=>this.refs.SQLTemplate.getSessionKey()} reportFormSql={reportFormSql}/>
                </WeaFormItem>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4eam3u`} label={getLabel(520572, '说明')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                            <div>{getLabel(521439, 'SQL查询结果中，将默认第一列为时间轴坐标，第二列为内容，系统将排序在最后的数据人为是最新数据，根据不同的时间轴样式，会将最新数据显示在最上方或最右侧')}</div>
                        </WeaFormItem>
                </React.Fragment>
                        ):null
        }
        </WeaSearchGroup>
        { datamode=='1'&&
        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@4plnj9`} title={getLabel(518423, '时间轴数据')} needTigger={true} showGroup={true}  customComponent={
            <div>
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6a7xu9`} type="primary" className="portal-esetting-wsg-btn" onClick={()=>this.onAddTab('add')}>
                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@0vko5k`} type="plus" style={{color: '#fff'}}/>
            </Button>
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3zeu2u`} type="primary"  className="portal-esetting-wsg-btn" disabled={!(selectedRowKeys && selectedRowKeys.length)}   onClick={()=>this.onDeleteTabs()}>
                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@wud7vt`} type="minus" style={{color: '#fff'}}/>
        </Button>
        <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@kt9r09`}
            width = {196} //如果要自定义宽度，在这里设置
            title={getLabel(520556, '时间轴在展示时，默认顺序值最大的数据为最新，根据不同的时间轴样式，会将最新数据显示在最上方或最右侧')}
            />
        {/*<Button type="primary" onClick={() => sids.onDel()} disabled={!(selectedRowKeys && selectedRowKeys.length)}>批量删除</Button>*/}
    </div>
    }>
        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@hs6qqd`}
            rowSelection={rowSelection}
            columns={columns}
            dataSource={dataList}
            pagination={false}
            draggable={false}
            onDrop={this.onSortTab}
            />
        </WeaSearchGroup>
                }
        </WeaDialog>
        )
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@cwcm9n`} type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@m16tz7`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }
    onCancel() {
        const {dataIds}=this.state;
        this.props.onCancel();
        dataIds.map((item,i)=>{
           let id=item.id;
            this.deleteTabs(id);
        })
    }
    onOk() {
        let count=0;
        const { isSaveTemplate } = this.state;
        this.state.dataList.map((item,i)=>{
            item.timeLine!=""?count=count+1:"";
        })
        if (!this.state.title ||(this.state.dataList.length!=count&&this.state.datamode=='1')) {
            message.warning(getLabel(15859, '必要信息不完整！'));
        } else {

        let _dataList=this.state.dataList;
        this.state.dataList.map((item,i)=>{
            _dataList[i].key=i;
        })
            this.setState({dataList:_dataList});
            this.props.onOk(this.state);
            isSaveTemplate && this.onAddSqlTemplate();
        }
    }

    onAddSqlTemplate(){
        const { title, timeLineSql,reportFormSql } = this.state;
        WeaTools.callApi('/api/portal/sqltemplate/update', 'POST', {id: '', title, reportFormSql}).then(result=> {
            if(result.api_status == '2'){
                message.error(result.error_msg);
            }else{
                message.success(getLabel(83551,"保存成功！"));
                this.setState({
                    visible: false,
                });
            }
        });
    }

    onSortTab(dataList) {
        this.setState({
            dataList: dataList
        });
    }
    onAddTab(type,tabId) {
        if('add' == type){
            const { dataList=[] ,dataIds=[] } = this.state;
            var maxOrder=0;
            maxOrder=(dataList.length)+1;
            dataList.push({ key:dataList.length, timeAxisOrder:maxOrder+'.00', timeLine:'', timeAxisContent: ''});
            dataIds.push({id:parseInt(dataList.length)-1})
            this.setState({
                dataList:dataList,
                dataIds:dataIds
            });
        }else{

        }

    }

    onDeleteTabs() {
        const { selectedRowKeys, dataList} = this.state;
        for (let i = 0; i < selectedRowKeys.length; i++) {
            this.deleteTabs(selectedRowKeys[i]);
        }
        this.setState({
            selectedRowKeys: []
        });
    }


    deleteTabs(dataId){
        const { dataList } = this.state;
        for (let i = 0; i< dataList.length; i++) {
            if (dataList[i].key == dataId) {
                dataList.splice(i, 1);
                break;
            }
        }
        this.setState({
            dataList:dataList,
            selectedRowKeys: []
        });
    }


}
export default Content_timeLine_DataSource;

    import { WeaTableNew, WeaLogView } from 'comsMobx';
const {LogStore} = WeaLogView;
const logStore =  new LogStore();
const WeaLogViewComp = WeaLogView.Component;
const { TableStore, WeaTable: WeaTableNews } = WeaTableNew;
const tableStore = new TableStore();
class SQLTemplate extends React.Component {
    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.getSessionKey = this.getSessionKey.bind(this);
        this.getRightMenu = this.getRightMenu.bind(this);
        this.onRightMenuClick = this.onRightMenuClick.bind(this);
        this.onOperatesClick = this.onOperatesClick.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
        this.doDelete = this.doDelete.bind(this);
        this.deleteRows = this.deleteRows.bind(this);
        this.onLogVisibleChange = this.onLogVisibleChange.bind(this);
        this.state = {
            sessionkey:'',
            loading: false,
            visible: false,
            title: '',
            creator: '',
            replaceDatas: [],
            showSearchAd: false,
            selectedRowKeys: '',
            logVisible: false,
        }
    }
    getSessionKey(params = {}){
        this.setState({visible: true, loading: true});
        if (this.state.sessionkey) {
            const { current = 1 } = tableStore;
            if (!params.current) {
                params.current = current;
            }
        }
        if(params.title === undefined){
            params.title = this.state.title;
        }
        if(params.creator === undefined){
            params.creator = this.state.creator;
        }
        WeaTools.callApi('/api/portal/sqltemplate/datas', 'POST', params).then(data => {
            const status = data.status || '1';
            if (status == '1') {
                this.setState({
                    sessionkey: data.sessionkey,
                    loading: false,
                    title: params.title,
                    creator: params.creator,
                    showSearchAd: false,
                    selectedRowKeys: '',
                });
                tableStore.getDatas(data.sessionkey, params.current || 1);
            }else if(status == '2'){
                message.error(data.errormsg);
                return;
            }
        });
    }
    onSubmit(){
        const { id, reportFormSql } = this.state;
        if(id){
            this.props.onChange(reportFormSql);
        }
        this.setState({visible: false});
    }
    getButtons(){
        const { selectedRowKeys } = this.state;
        let btns = [];
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@er4rsf`} type="primary" onClick={()=>this.props.onEdit({id:'', title: '', reportFormSql: '', type: 'add'})}>{getLabel(365, '新建')}</Button>);
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@22fngc`} type="primary" onClick={this.deleteRows} disabled={!selectedRowKeys}>{getLabel(32136, '批量删除')}</Button>)
        return btns
    }
    deleteRows(){
        let ids = "";
        if(this.state.sessionkey){
            const { selectedRowKeys } = tableStore;
            ids = selectedRowKeys.join(",");
        }
        this.doDelete(ids);
    }
    doDelete(ids){
        Modal.confirm({
            title: '信息确认',
            content: getLabel(15097,'确定要删除吗？'),
            onOk: () => {
                WeaTools.callApi('/api/portal/sqltemplate/delete', 'POST', {ids}).then((data) => {
                    if (data.api_status === 'success') {
                        message.success(getLabel(83472, "删除成功！"));
                        this.getSessionKey();
                    } else {
                        message.error(getLabel(83473, "删除失败！"));
                    }
                });
            },
        });
    }
    getRightMenu(){
        const { selectedRowKeys } = this.state;
        let btns = [];
        btns.push({
            icon: <i className='icon-coms-Preservation'/>,
            content:getLabel(365, '新建')
    });
        btns.push({
            icon: <i className='icon-coms-go-back'/>,
            disabled: !selectedRowKeys,
            content:getLabel(32136, '批量删除')
    });
        btns.push({key: 'log', icon: <i className='icon-coms-Print-log'/>, content: getLabel(83, '日志'), onClick: this.onLogVisibleChange});
        return btns
    }
    onRightMenuClick(key){
        switch(key){
            case '0':
                this.props.onEdit({id:'', title: '', reportFormSql: '', type: 'add'});
                break;
            case '1':
                this.deleteRows();
                break;
        }
    }
    onOperatesClick(record,index,operate,flag){
        const id = record.randomFieldId;
        switch(operate.index){
            case '0':
                this.props.onEdit({id, title: record.title, reportFormSql: record.reportformsql, type: 'edit'});
                break;
            case '1':
                this.doDelete(id);
                break;
            case '2':
                break;
        }
    }
    onLogVisibleChange() {
        const { logVisible }= this.state;
        this.setState({
            logVisible: !logVisible
        });
    }

    onEnterSearch(){
        this.getSessionKey();
    }

    render() {
        const { visible, loading, datas, title, replaceDatas, logVisible } = this.state;
        let rowSelection = {
            onChange:(selectedRowKeys, selectedRows) => {
                this.setState({selectedRowKeys: `${selectedRowKeys}`});
            }
        }
        return <div style={{display: 'inline-block'}}>
    <div><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@8pmpxr`} type="setting" title={getLabel(388014,"sql模板管理")} className="synergy-setting-btn synergy-setting-btn-setting" onClick={()=>this.getSessionKey({title:'',creator:'',current:1})}/></div>
        <WeaLogViewComp ecId={`${this && this.props && this.props.ecId || ''}_WeaLogViewComp@scwzmc`} visible={logVisible} onCancel={this.onLogVisibleChange} logStore={logStore} logType="6" logSmallType="25"/>
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@moio3z`}
                title={getLabel(388014,"sql模板管理")}
                visible={visible}
                closable={true}
                onCancel={()=>this.setState({visible: false})}
                icon='icon-coms-portal'
                iconBgcolor='#1a57a0'
                maskClosable={false}
                buttons={this.getButtons()}
                style={{width: 900, height: 520}}
            >
            <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@01ijp6`} datas={this.getRightMenu()} onClick={this.onRightMenuClick}>
                <div>
                    <div style={{lineHeight: '60px'}}>
                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@1zu16v`}
                        datas={[]}
                        searchType={['base','advanced']}
                        showSearchAd={this.state.showSearchAd}
                        searchsBaseValue={title}
                        setShowSearchAd={bool=>{
                            this.setState({
                             showSearchAd: bool
                            })
                        }}
                buttonsAd={[
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0rv0wq`} type="primary" onClick={()=>this.getSessionKey()}>{getLabel(197, '搜索')}</Button>),
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@nxzjnd`} type="ghost" onClick={()=>this.setState({
                    title: '',
                    creator: '',
                    replaceDatas: [],
                     })}>{getLabel(2022, '重置')}</Button>),
                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@m8pim5`} type="ghost" onClick={()=>this.setState({
                        showSearchAd: false
                    })}>{getLabel(31129, '取消')}</Button>)
                ]}
                advanceHeight={108}
                searchsAd={<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@l0bpvd`} needTigger={false} showGroup={true} items={[
                {com:<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4zdfgm`}
                    label={getLabel(33439, "名称")}
                labelCol={{span: 6}}
                wrapperCol={{span: 18}}>
            <div style={{marginTop:'5px'}}>
    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@23gstd`} value={title} onChange={value=>this.setState({title: value})} onEnterSearch={this.onEnterSearch.bind(this)}/>
        </div>
        </WeaFormItem>,
        colSpan:1
    },
        {com:<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@p1nabz`}
            label={getLabel(882,"创建人")}
            labelCol={{span: 6}}
            wrapperCol={{span: 18}}>
        <div style={{marginTop:'19px'}}><WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@1detir`}
            type={'17'}
            replaceDatas={replaceDatas}
            hasAdvanceSerach={true}
            title={getLabel(83496,"多人力资源")}
            isSingle={false}
            onChange={(ids, names, datas)=>{
            this.setState({creator: `${ids}`, replaceDatas: datas})
        }}
            /></div>
        </WeaFormItem>,
            colSpan:1}
    ]}/>}
        keyParam="viewcondition"  //主键
        countParam="groupid" //数量
        onSearch={()=>this.getSessionKey()}
        onSearchChange={value=>this.setState({title: value})}
        />
        </div>
        <div>
        <WeaTableNews ecId={`${this && this.props && this.props.ecId || ''}_WeaTableNews@v8dk1k`} needScroll={true} rowSelection={rowSelection} comsWeaTableStore={tableStore} onOperatesClick={this.onOperatesClick}/>
        </div>
        </div>
        </WeaRightMenu>
        </WeaDialog>
        </div>
    }
    }
    class SaveSQLTemplate extends React.Component {
    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.getRightMenu = this.getRightMenu.bind(this);
        this.onRightMenuClick = this.onRightMenuClick.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
        this.state = {
            visible: false,
            id: '',
            type: '',
            title: '',
            reportFormSql: '',
        }
    }
    onSubmit(){
        const { id, type, title, reportFormSql } = this.state;
        if(!title.trim()){
            this.title.showError();
            return;
        }
        WeaTools.callApi('/api/portal/sqltemplate/update', 'POST', {id, title, reportFormSql}).then(result=> {
            if(result.api_status == '2'){
                message.error(result.error_msg);
            }else{
                this.props.onRefresh();
                message.success(getLabel(83551,"保存成功！"));
                this.setState({
                    visible: false,
                });
            }
        });
    }
    getButtons(){
        let btns = [];
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3qirxh`} type="primary" onClick={this.onSubmit}>{getLabel(826, '确定')}</Button>);
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@c7wz2l`} onClick={()=>this.setState({visible:false})}>{getLabel(31129, '取消')}</Button>)
        return btns
    }
    getRightMenu(){
        let btns = [];
        btns.push({
            icon: <i className='icon-coms-Preservation'/>,
            content:getLabel(826, '确定')
    });
        btns.push({
            icon: <i className='icon-coms-go-back'/>,
            content:getLabel(31129, '取消')
    });
        return btns
    }
    onRightMenuClick(key){
        switch(key){
            case '0':
                this.onSubmit();
                break;
            case '1':
                this.setState({visible:false});
                break;
        }
    }
    render() {
        const { title, visible, reportFormSql } = this.state;
        let d_title = getLabel(388015,"编辑sql模板");

        return <div style={{display: 'inline-block'}}>
    <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@oxg039`}
        title={d_title}
        visible={visible}
        closable={true}
        onCancel={()=>this.setState({visible: false})}
        icon='icon-coms-portal'
        iconBgcolor='#1a57a0'
        maskClosable={false}
        buttons={this.getButtons()}
        zIndex={1051}
        style={{width: 600, height: 300}}
    >
    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@f8hq6b`} datas={this.getRightMenu()} onClick={this.onRightMenuClick}>
    <div style={{width: '90%', margin: '0 auto', paddingTop: '22px'}}>
    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ya9cpd`}
        label={getLabel(33439, '名称')}
        labelCol={{span: 6}}
        wrapperCol={{span: 18}}>
    <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@2zxlnl`}
        style={{width: '100%'}}
        ref={el => {this.title = el}}
        error={getLabel(385021, '数据为空')}
        tipPosition={'bottom'}>
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@3ewcfx`} viewAttr={3} style={{width: 280}} fieldName="title" value={title} onChange={value=>this.setState({title: value})}/>
        </WeaError>
        </WeaFormItem>
        <div style={{marginTop: '35px'}}>
    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@o8y79u`} label={getLabel(28479,"SQL语句")} labelCol={{span: 6}} wrapperCol={{span: 16}}>
    <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@g8ao0a`}
        value={reportFormSql}
        minRows={5}
        onChange={value => {
            this.setState({reportFormSql: value})
        }}
        />
        </WeaFormItem>
        </div>
        </div>
        </WeaRightMenu>
        </WeaDialog>
        </div>
    }
}